/*
 * @Author: Zhang Kai
 * @Date: 2022-05-19 18:01:04
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-06-01 16:14:34
 * @FilePath: /metricsx-standard-ui/src/views/indexManage/frontSettings/index.tsx
 */
import { ElTabPane, ElTabs, TabsPaneContext } from 'element-plus';
import { ElMessage } from 'element-plus/lib/index';
import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
import ColumnInfo from './components/ColumnInfo/index';
import ClassManage from './components/classManage/index';
import API from '@/services';
import './index.scss';

const frontSettings = defineComponent({
  name: 'frontSettings',
  components: {},
  setup: (props, { slots, attrs, emit }) => {
    const state: any = reactive({
      tabValue: 1 //页签的值
    });

    const conditionConfigList: any = ref([]);

    const detailConfigList: any = ref([]);

    const indexType = ref('atomic');

    const detailConfig = computed(() => [
      {
        name: '基本信息',
        porp: 'baseInfo',
        value: detailConfigList.value.baseInfo,
        ref: ref()
      },
      {
        name: '业务信息',
        porp: 'businessInfo',
        value: detailConfigList.value.businessInfo,
        ref: ref()
      },
      {
        name: '技术信息',
        porp: 'techInfo',
        value: detailConfigList.value.techInfo,
        ref: ref()
      },
      {
        name: '管理信息',
        porp: 'manageInfo',
        value: detailConfigList.value.manageInfo,
        ref: ref()
      }
    ]);

    const columnInfoRef: any = ref();

    /* 保存筛选条件配置 */
    const saveConditionConfig = async () => {
      try {
        let { code, data } = await API.metricsMarket.putConditionSave({
          conditionList: columnInfoRef.value.list
        });
        if (code === 200) {
          ElMessage.success('保存成功');
          getConditionConfig();
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 保存详情页配置 */
    const saveDetailConfig = async () => {
      const obj: any = {};
      detailConfig.value.forEach((v) => {
        obj[v.porp] = v.ref.value.list;
      });
      try {
        let { code, data } = await API.metricsMarket.putDetailSaveByName(
          { name: indexType.value },
          obj
        );
        if (code === 200) {
          ElMessage.success('保存成功');
          getDetailConfig();
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 筛选条件配置list */
    const getConditionConfig = async () => {
      try {
        let {
          code,
          data: { conditionList }
        }: any = await API.metricsMarket.getCondition();
        if (code === 200) {
          conditionConfigList.value = conditionList;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 详情页配置list */
    const getDetailConfig = async () => {
      try {
        let { code, data }: any = await API.metricsMarket.getDetailByName({
          name: indexType.value
        });
        if (code === 200) {
          detailConfigList.value = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    onMounted(() => {
      tabChange();
    });

    //页签切换
    const tabChange = () => {
      switch (state.tabValue) {
        case 1:
          getConditionConfig();
          break;
        case 2:
          console.log('分组管理');
          break;
        case 3:
          getDetailConfig();
          break;
        default:
          '';
      }
    };

    return () => {
      return (
        <div class="front-settings">
          <ElTabs
            class="tab-type"
            v-model={state.tabValue}
            onTab-click={tabChange}
          >
            <ElTabPane label="筛选条件设置" name={1}>
              <div class="filter-container">
                <ColumnInfo
                  ref={columnInfoRef}
                  list={conditionConfigList.value}
                />
                <div class="footer">
                  <el-button type="primary" onClick={saveConditionConfig}>
                    保存
                  </el-button>
                </div>
              </div>
            </ElTabPane>
            <ElTabPane label="分类管理" name={2}>
              <ClassManage keys={state.tabValue} />
            </ElTabPane>
            <ElTabPane label="详情页设置" name={3}>
              <div class="detailConfig-container">
                <div class="detailConfig-type">
                  <div class="detailConfig-type-label">选择页面：</div>
                  <el-radio-group
                    onChange={getDetailConfig}
                    v-model={indexType.value}
                  >
                    <el-radio label="atomic">原子指标</el-radio>
                    <el-radio label="derived">派生指标</el-radio>
                    <el-radio label="logic">衍生指标</el-radio>
                  </el-radio-group>
                </div>
                {detailConfig.value.map((v: any) => (
                  <ColumnInfo ref={v.ref} titles={v.name} list={v.value} />
                ))}
              </div>
              <div class="footer">
                <el-button type="primary" onClick={() => saveDetailConfig()}>
                  保存
                </el-button>
              </div>
            </ElTabPane>
          </ElTabs>
        </div>
      );
    };
  }
});

export default frontSettings;
